import React from "react";
import { Route, Link, Routes } from "react-router-dom";

import Home from "./pages/Home/index";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

function App() {
  return (
    <div className="app">
      <div className="header"></div>
      <div className="main">
        <div className="left">
          {/* 导航区 */}
          <Link className="link active" to="/home/1">
            Home
          </Link>
          <Link className="link" to="/about">
            About
          </Link>
        </div>
        <div className="right">
          <Routes>
            {/* 
              v5 中的 exact 的作用是，精准匹配
              v6 中的 exact 被移除了，默认就是精准匹配

              v5 中的 component={Home} Home 组件的调用是路由帮我们做的，他会帮我们主动传递 history location match
              v6 中的 element={<Home />}  Home 组件是我们主动调用的。需要什么参数得自己去传递。
                  如果需要编程式导航、路由参数的接收的操作，可以直接在 对应组件内 使用 hooks
            */}
            <Route path="/home/*" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}

export default App;
